<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <script src="../../lib/jquery-3.4.1.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="../../lib/bs/css/bootstrap.css">
    <link rel="stylesheet" href="../../CssTest/css/base.css">


</head>
<body>

<h2 class="title">基本表格</h2>

<table class="table">
    <caption>caption标题</caption>
    <tr>
        <th>#</th>
        <th>first</th>
        <th>second</th>
        <th>third</th>
    </tr>

    <tr>
        <td>1</td>
        <td>xing</td>
        <td>wei</td>
        <td>xin</td>

    </tr>


    <tr>
        <td>2</td>
        <td>feng</td>
        <td>memg</td>
        <td>yue</td>

    </tr>

</table>


<hr class="hr1">
<h2 class="title">条线状表格</h2>

<table class="table table-striped">
    <caption>caption标题</caption>
    <tr>
        <th>#</th>
        <th>first</th>
        <th>second</th>
        <th>third</th>
    </tr>

    <tr>
        <td>1</td>
        <td>xing</td>
        <td>wei</td>
        <td>xin</td>

    </tr>


    <tr>
        <td>2</td>
        <td>feng</td>
        <td>memg</td>
        <td>yue</td>

    </tr>

</table>

<hr class="hr1">

<h2 class="title">鼠标悬停</h2>

<table class="table table-hover">
    <caption>caption标题</caption>
    <tr>
        <th>#</th>
        <th>first</th>
        <th>second</th>
        <th>third</th>
    </tr>

    <tr>
        <td>1</td>
        <td>xing</td>
        <td>wei</td>
        <td>xin</td>

    </tr>


    <tr>
        <td>2</td>
        <td>feng</td>
        <td>memg</td>
        <td>yue</td>

    </tr>

</table>


<h2 class="title">紧缩表格</h2>
<table class="table table-condensed ">
    <caption>caption标题</caption>
    <tr>
        <th>#</th>
        <th>first</th>
        <th>second</th>
        <th>third</th>
    </tr>

    <tr>
        <td>1</td>
        <td>xing</td>
        <td>wei</td>
        <td>xin</td>

    </tr>


    <tr>
        <td>2</td>
        <td>feng</td>
        <td>memg</td>
        <td>yue</td>

    </tr>



    <hr class="hr1">
    <h2>状态类</h2>


    <table class="table table-condensed ">
        <caption>caption标题</caption>
        <tr class="active">
            <th>#</th>
            <th>first</th>
            <th>second</th>
            <th>third</th>
        </tr>

        <tr class="success">
            <td>1</td>
            <td>xing</td>
            <td>wei</td>
            <td>xin</td>

        </tr>



        <tr class="info">
            <td>3</td>
            <td>li</td>
            <td>fu</td>
            <td>chao</td>

        </tr>

        <tr class="warning">
            <td>3</td>
            <td>li</td>
            <td>fu</td>
            <td>chao</td>

        </tr>

        <tr class="danger">
            <td>3</td>
            <td>li</td>
            <td>fu</td>
            <td>chao</td>

        </tr>

        <tr class="active">
            <td>3</td>
            <td>li</td>
            <td>fu</td>
            <td>chao</td>

        </tr>

    </table>


    <h2 class="">响应式表格</h2>


    <div class="table-responsive" style="margin-bottom: 100px">

        <table class="table " >

            <tr class="info">

                <th>hang1</th>
                <th>hang2</th>
                <th>hang3</th>
                <th>hang4</th>
                <th>hang5</th>
                <th>hang6</th>
                <th>hang7</th>
                <th>hang8</th>
                <th>hang9</th>
                <th>hang10</th>

            </tr>

            <tr class="active">

                <td>xingweixin</td>
                <td>xingweixin</td>
                <td>xingweixin</td>
                <td>xingweixin</td>
                <td>xingweixin</td>
                <td>xingweixin</td>
                <td>xingweixin</td>
                <td>xingweixin</td>
                <td>xingweixin</td>
                <td>xingweixin</td>
            </tr>

        </table>

    </div>








</body>
</html>